<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>佰汇鑫门窗产品询价单</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
            color: #334155;
            line-height: 1.6;
            padding: 0;
            max-width: 500px;
            margin: 0 auto;
            min-height: 100vh;
            position: relative;
        }
        
        .app-container {
            background: white;
            min-height: 100vh;
            position: relative;
            padding-bottom: 70px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
        }
        
        /* 头部 */
        .header {
            background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
            color: white;
            padding: 20px;
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            position: relative;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        
        .logo {
            font-size: 32px;
            margin-bottom: 5px;
            color: #ffd700;
            font-weight: bold;
            text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
        }
        
        /* 内容区域 */
        .content {
            padding: 20px;
        }
        
        /* 步骤指示器 */
        .step-indicator {
            display: flex;
            justify-content: space-between;
            margin-bottom: 30px;
            position: relative;
        }
        
        .step-indicator::before {
            content: '';
            position: absolute;
            top: 15px;
            left: 0;
            right: 0;
            height: 3px;
            background: #e2e8f0;
            z-index: 1;
        }
        
        .step {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: #e2e8f0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            color: #64748b;
            position: relative;
            z-index: 2;
        }
        
        .step.active {
            background: #3b82f6;
            color: white;
        }
        
        .step-label {
            position: absolute;
            top: 35px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 12px;
            color: #64748b;
            white-space: nowrap;
        }
        
        .step.active .step-label {
            color: #3b82f6;
            font-weight: bold;
        }
        
        /* 页面样式 */
        .page {
            display: none;
            animation: fadeIn 0.5s ease;
        }
        
        .page.active {
            display: block;
        }
        
        .welcome-title {
            text-align: center;
            font-size: 24px;
            color: #1e293b;
            margin: 15px 0;
        }
        
        .welcome-desc {
            text-align: center;
            color: #64748b;
            margin-bottom: 20px;
            font-size: 14px;
        }
        
        .welcome-image {
            width: 100%;
            height: 200px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 18px;
            margin-bottom: 25px;
            position: relative;
            overflow: hidden;
            background: url('https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80') center/cover no-repeat;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        
        .welcome-image::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.4));
        }
        
        .welcome-image div {
            position: relative;
            z-index: 1;
            text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
            font-weight: bold;
        }
        
        /* 选项样式 */
        .options {
            display: grid;
            gap: 15px;
        }
        
        .option-card {
            border: 2px solid #e2e8f0;
            border-radius: 12px;
            padding: 15px;
            display: flex;
            align-items: center;
            cursor: pointer;
            transition: all 0.3s ease;
            background: white;
        }
        
        .option-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
            border-color: #3b82f6;
        }
        
        .option-card.selected {
            border-color: #3b82f6;
            background-color: #f0f7ff;
        }
        
        .option-icon {
            width: 45px;
            height: 45px;
            border-radius: 10px;
            background: #e0f2fe;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            color: #3b82f6;
            font-size: 22px;
        }
        
        .option-text {
            flex: 1;
        }
        
        .option-title {
            font-weight: bold;
            margin-bottom: 5px;
            color: #1e293b;
            font-size: 16px;
        }
        
        .option-desc {
            font-size: 14px;
            color: #64748b;
        }
        
        /* 表单样式 */
        .form-group {
            margin-bottom: 15px;
        }
        
        .form-title {
            font-size: 18px;
            color: #1e293b;
            margin-bottom: 12px;
            font-weight: bold;
        }
        
        .input-item {
            margin-bottom: 15px;
        }
        
        .input-item label {
            display: block;
            font-size: 15px;
            margin-bottom: 8px;
            color: #1e293b;
            font-weight: bold;
        }
        
        .input-item.optional label::after {
            content: " (选填)";
            color: #94a3b8;
            font-weight: normal;
        }
        
        .input-item input, 
        .input-item select,
        .input-item textarea {
            width: 100%;
            padding: 14px;
            border: 2px solid #e2e8f0;
            border-radius: 10px;
            font-size: 15px;
            transition: all 0.3s;
            background: white;
        }
        
        .input-item input:focus,
        .input-item select:focus,
        .input-item textarea:focus {
            border-color: #3b82f6;
            outline: none;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
        }
        
        .input-item textarea {
            min-height: 100px;
            resize: vertical;
        }
        
        /* 单选按钮组 */
        .radio-group {
            display: flex;
            gap: 20px;
        }
        
        .radio-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .radio-item input[type="radio"] {
            width: auto;
        }
        
        /* 尺寸输入区域 */
        .size-inputs {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr auto;
            gap: 10px;
            margin-bottom: 15px;
            align-items: end;
        }
        
        .size-input {
            display: flex;
            flex-direction: column;
        }
        
        .size-input label {
            font-size: 14px;
            margin-bottom: 5px;
            color: #64748b;
        }
        
        .size-input input {
            padding: 12px;
            border: 2px solid #e2e8f0;
            border-radius: 8px;
            font-size: 14px;
        }
        
        .add-size-btn {
            padding: 12px;
            background: #3b82f6;
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 14px;
            transition: background 0.3s;
        }
        
        .add-size-btn:hover {
            background: #2563eb;
        }
        
        .size-list {
            margin-top: 20px;
            border-top: 1px solid #e2e8f0;
            padding-top: 15px;
        }
        
        .size-item {
            display: flex;
            justify-content: space-between;
            padding: 12px;
            border-bottom: 1px solid #f1f5f9;
            font-size: 14px;
            background: #f8fafc;
            border-radius: 8px;
            margin-bottom: 8px;
        }
        
        .delete-size {
            color: #ef4444;
            cursor: pointer;
            font-size: 14px;
            padding: 2px 6px;
            border-radius: 4px;
            transition: background 0.2s;
        }
        
        .delete-size:hover {
            background: #fee2e2;
        }
        
        .area-result {
            background: #f0f7ff;
            padding: 15px;
            border-radius: 10px;
            text-align: center;
            margin-top: 20px;
            border: 2px dashed #3b82f6;
        }
        
        .area-value {
            font-size: 24px;
            font-weight: bold;
            color: #3b82f6;
            margin: 10px 0;
        }
        
        /* 功能选择 */
        .feature-options {
            display: grid;
            gap: 15px;
        }
        
        .feature-card {
            border: 2px solid #e2e8f0;
            border-radius: 10px;
            padding: 15px;
            display: flex;
            align-items: center;
            cursor: pointer;
            transition: all 0.3s ease;
            background: white;
        }
        
        .feature-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
            border-color: #3b82f6;
        }
        
        .feature-card.selected {
            border-color: #3b82f6;
            background-color: #f0f7ff;
        }
        
        .feature-icon {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            background: #e0f2fe;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            color: #3b82f6;
            font-size: 20px;
        }
        
        .feature-text {
            flex: 1;
        }
        
        .feature-title {
            font-weight: bold;
            margin-bottom: 5px;
            color: #1e293b;
            font-size: 16px;
        }
        
        .feature-desc {
            font-size: 14px;
            color: #64748b;
        }
        
        /* 底部导航 */
        .footer-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            max-width: 500px;
            margin: 0 auto;
            background: white;
            padding: 15px;
            display: flex;
            justify-content: space-between;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
        }
        
        .nav-btn {
            padding: 12px 25px;
            border-radius: 8px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            border: none;
        }
        
        .btn-prev {
            background: #f1f5f9;
            color: #64748b;
        }
        
        .btn-prev:hover {
            background: #e2e8f0;
        }
        
        .btn-next {
            background: #3b82f6;
            color: white;
        }
        
        .btn-next:hover {
            background: #2563eb;
        }
        
        /* 动画 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        /* 响应式调整 */
        @media (max-width: 400px) {
            .content {
                padding: 15px;
            }
            
            .header {
                padding: 15px;
                font-size: 18px;
            }
            
            .logo {
                font-size: 28px;
            }
            
            .welcome-title {
                font-size: 20px;
            }
            
            .size-inputs {
                grid-template-columns: 1fr;
            }
        }
        
        /* 提示信息 */
        .info-note {
            background: #e0f2fe;
            border-left: 4px solid #3b82f6;
            padding: 15px;
            margin: 20px 0;
            border-radius: 6px;
            font-size: 14px;
            color: #1e40af;
        }
        
        .error-message {
            color: #ef4444;
            font-size: 14px;
            margin-top: 5px;
            display: none;
        }
        
        /* 后台按钮 */
        .admin-btn {
            position: fixed;
            top: 10px;
            right: 10px;
            background: #3b82f6;
            color: white;
            border: none;
            border-radius: 6px;
            padding: 10px 15px;
            font-size: 13px;
            cursor: pointer;
            z-index: 1000;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            transition: background 0.3s;
        }
        
        .admin-btn:hover {
            background: #2563eb;
        }
    </style>
</head>
<body>
    <button class="admin-btn" onclick="window.open('admin.html', '_blank')">后台查看</button>
    
    <div class="app-container">
        <!-- 头部 -->
        <div class="header">
            <div class="logo">佰汇鑫门窗</div>
            <div>产品询价单</div>
        </div>
        
        <!-- 内容区域 -->
        <div class="content">
            <!-- 步骤指示器 -->
            <div class="step-indicator">
                <div class="step active"><span>1</span><span class="step-label">欢迎</span></div>
                <div class="step"><span>2</span><span class="step-label">样式</span></div>
                <div class="step"><span>3</span><span class="step-label">地址</span></div>
                <div class="step"><span>4</span><span class="step-label">尺寸</span></div>
                <div class="step"><span>5</span><span class="step-label">功能</span></div>
                <div class="step"><span>6</span><span class="step-label">联系</span></div>
            </div>
            
            <!-- 页面1: 欢迎页 -->
            <div class="page active" id="page1">
                <div class="welcome-title">佰汇鑫门窗 - 品质生活的选择</div>
                <div class="welcome-desc">专业定制，品质保障，让家更美好</div>
                
                <div class="welcome-image">
                    <div>明亮大阳台 · 品质落地窗</div>
                </div>
                
                <div class="options">
                    <div class="option-card">
                        <div class="option-icon"><i class="fas fa-home"></i></div>
                        <div class="option-text">
                            <div class="option-title">专业品质</div>
                            <div class="option-desc">精选优质材料，工艺精湛，耐用持久</div>
                        </div>
                    </div>
                    <div class="option-card">
                        <div class="option-icon"><i class="fas fa-tools"></i></div>
                        <div class="option-text">
                            <div class="option-title">定制服务</div>
                            <div class="option-desc">根据您的需求定制专属门窗解决方案</div>
                        </div>
                    </div>
                    <div class="option-card">
                        <div class="option-icon"><i class="fas fa-handshake"></i></div>
                        <div class="option-text">
                            <div class="option-title">诚信服务</div>
                            <div class="option-desc">诚信经营，客户至上，售后无忧</div>
                        </div>
                    </div>
                    <div class="option-card">
                        <div class="option-icon"><i class="fas fa-shield-alt"></i></div>
                        <div class="option-text">
                            <div class="option-title">安全保障</div>
                            <div class="option-desc">多重安全设计，守护家人平安</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 页面2: 窗户样式选择 -->
            <div class="page" id="page2">
                <div class="welcome-title">请选择您喜欢的窗户样式</div>
                <div class="welcome-desc">我们提供多种优质窗户样式供您选择</div>
                
                <div class="options">
                    <div class="option-card" data-value="inward">
                        <div class="option-icon"><i class="fas fa-window-restore"></i></div>
                        <div class="option-text">
                            <div class="option-title">内开系统窗</div>
                            <div class="option-desc">向内开启，便于清洁，密封性能优异</div>
                        </div>
                    </div>
                    <div class="option-card" data-value="outward">
                        <div class="option-icon"><i class="fas fa-external-link-alt"></i></div>
                        <div class="option-text">
                            <div class="option-title">外开系统窗</div>
                            <div class="option-desc">向外开启，不占用室内空间，防水性能好</div>
                        </div>
                    </div>
                    <div class="option-card" data-value="slide">
                        <div class="option-icon"><i class="fas fa-window-maximize"></i></div>
                        <div class="option-text">
                            <div class="option-title">六轨推拉窗</div>
                            <div class="option-desc">顺滑推拉设计，节省空间，适合阳台和大型开口</div>
                        </div>
                    </div>
                    <div class="option-card" data-value="pressure">
                        <div class="option-icon"><i class="fas fa-compress-alt"></i></div>
                        <div class="option-text">
                            <div class="option-title">侧压气密窗</div>
                            <div class="option-desc">侧压式设计，气密性能优异，隔音隔热效果好</div>
                        </div>
                    </div>
                    <div class="option-card" data-value="heavyDoor">
                        <div class="option-icon"><i class="fas fa-door-open"></i></div>
                        <div class="option-text">
                            <div class="option-title">重型推拉门</div>
                            <div class="option-desc">承重能力强，稳定性好，适合大型空间</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 页面3: 地址信息 -->
            <div class="page" id="page3">
                <div class="welcome-title">请填写您的地址信息</div>
                <div class="welcome-desc">我们将根据地址信息提供更准确的服务</div>
                
                <div class="form-group">
                    <div class="form-title">选择所在区域</div>
                    <div class="input-item">
                        <label for="district">区/镇</label>
                        <select id="district">
                            <option value="">请选择区/镇</option>
                            <option value="梁溪区">梁溪区</option>
                            <option value="滨湖区">滨湖区</option>
                            <option value="新吴区">新吴区</option>
                            <option value="锡山区">锡山区</option>
                            <option value="惠山区">惠山区</option>
                            <option value="经开区">经开区</option>
                            <option value="江阴市">江阴市</option>
                            <option value="宜兴市">宜兴市</option>
                        </select>
                    </div>
                    
                    <div class="input-item optional">
                        <label for="address">详细地址</label>
                        <input type="text" id="address" placeholder="请输入详细地址">
                    </div>
                </div>
                
                <div class="form-group">
                    <div class="form-title">房屋信息</div>
                    <div class="input-item optional">
                        <label for="floor">房屋楼层</label>
                        <input type="number" id="floor" min="1" max="100" placeholder="请输入楼层">
                    </div>
                    
                    <div class="input-item">
                        <label>是否需要上门量房服务</label>
                        <div class="radio-group">
                            <div class="radio-item">
                                <input type="radio" id="measure-yes" name="measure" value="yes">
                                <label for="measure-yes">需要</label>
                            </div>
                            <div class="radio-item">
                                <input type="radio" id="measure-no" name="measure" value="no" checked>
                                <label for="measure-no">不需要</label>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="info-note" id="measureNote" style="display: none;">
                    您已选择上门量房服务，下一步的尺寸信息可以跳过，我们的专业人员将上门为您精确测量。
                </div>
            </div>
            
            <!-- 页面4: 尺寸输入 -->
            <div class="page" id="page4">
                <div class="welcome-title">请输入窗户尺寸</div>
                <div class="welcome-desc">您可以添加多个尺寸，我们将计算总面积</div>
                
                <div class="info-note" id="skipSizeNote" style="display: none;">
                    您已选择上门量房服务，可以跳过此步骤直接点击"下一步"。
                </div>
                
                <div class="info-note" id="requireSizeNote">
                    请至少添加一个尺寸信息，以便我们为您准确报价。
                </div>
                
                <div class="size-inputs">
                    <div class="size-input">
                        <label for="width">宽度 (cm)</label>
                        <input type="number" id="width" min="0" max="500" placeholder="宽度">
                    </div>
                    <div class="size-input">
                        <label for="height">高度 (cm)</label>
                        <input type="number" id="height" min="0" max="500" placeholder="高度">
                    </div>
                    <div class="size-input">
                        <label for="quantity">件数</label>
                        <input type="number" id="quantity" min="1" value="1" placeholder="件数">
                    </div>
                    <button class="add-size-btn" id="addSizeBtn">添加</button>
                </div>
                
                <div class="size-list" id="sizeList">
                    <!-- 尺寸列表将通过JS动态生成 -->
                </div>
                
                <div class="area-result">
                    <div>总面积计算</div>
                    <div class="area-value" id="areaValue">0.00 平方米</div>
                    <div>（所有尺寸的宽度 × 高度 ÷ 10000 × 件数 之和）</div>
                </div>
            </div>
            
            <!-- 页面5: 功能选择 -->
            <div class="page" id="page5">
                <div class="welcome-title">请选择所需功能</div>
                <div class="welcome-desc">我们提供多种实用功能增强您的使用体验</div>
                
                <div class="feature-options">
                    <div class="feature-card" data-value="ventilation">
                        <div class="feature-icon"><i class="fas fa-wind"></i></div>
                        <div class="feature-text">
                            <div class="feature-title">通风换气</div>
                            <div class="feature-desc">内置通风系统，保持室内空气新鲜</div>
                        </div>
                    </div>
                    <div class="feature-card" data-value="wideAngle">
                        <div class="feature-icon"><i class="fas fa-expand"></i></div>
                        <div class="feature-text">
                            <div class="feature-title">广角视镜</div>
                            <div class="feature-desc">扩大视野范围，方便观察室外情况</div>
                        </div>
                    </div>
                    <div class="feature-card" data-value="soundproof">
                        <div class="feature-icon"><i class="fas fa-volume-mute"></i></div>
                        <div class="feature-text">
                            <div class="feature-title">隔音降噪</div>
                            <div class="feature-desc">有效降低外部噪音，创造安静环境</div>
                        </div>
                    </div>
                    <div class="feature-card" data-value="insulation">
                        <div class="feature-icon"><i class="fas fa-temperature-low"></i></div>
                        <div class="feature-text">
                            <div class="feature-title">保温节能</div>
                            <div class="feature-desc">提高保温性能，减少能源消耗</div>
                        </div>
                    </div>
                    <div class="feature-card" data-value="security">
                        <div class="feature-icon"><i class="fas fa-lock"></i></div>
                        <div class="feature-text">
                            <div class="feature-title">安全防护</div>
                            <div class="feature-desc">增强安全设计，保护家人安全</div>
                        </div>
                    </div>
                    <div class="feature-card" data-value="pricePriority">
                        <div class="feature-icon"><i class="fas fa-tags"></i></div>
                        <div class="feature-text">
                            <div class="feature-title">价格优先</div>
                            <div class="feature-desc">优先考虑经济实惠的解决方案</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 页面6: 联系信息 -->
            <div class="page" id="page6">
                <div class="welcome-title">请填写您的联系信息</div>
                <div class="welcome-desc">我们将根据这些信息为您制定最佳方案并与您联系</div>
                
                <div class="info-note">
                    请您提供准确的联系方式，我们的专业顾问将根据您的需求为您制定一套优质的门窗解决方案，并在24小时内与您联系。
                </div>
                
                <div class="form-group">
                    <div class="input-item">
                        <label for="name">您的称呼</label>
                        <input type="text" id="name" placeholder="请输入您的姓名" required>
                    </div>
                    
                    <div class="input-item">
                        <label for="phone">联系电话 <span style="color: #ef4444;">*</span></label>
                        <input type="tel" id="phone" placeholder="请输入11位手机号码" required maxlength="11">
                        <div class="error-message" id="phoneError">请输入正确的11位手机号码</div>
                    </div>
                    
                    <div class="input-item optional">
                        <label for="request">您的诉求和建议</label>
                        <textarea id="request" placeholder="请描述您的具体需求和任何建议"></textarea>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 底部导航 -->
        <div class="footer-nav">
            <button class="nav-btn btn-prev" id="prevBtn">上一步</button>
            <button class="nav-btn btn-next" id="nextBtn">下一步</button>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 当前页面
            let currentPage = 1;
            const totalPages = 6;
            
            // 用户选择数据
            const userSelections = {
                style: '',
                district: '',
                address: '',
                floor: '',
                measure: 'no',
                sizes: [],
                features: [],
                name: '',
                phone: '',
                request: ''
            };
            
            // DOM元素
            const prevBtn = document.getElementById('prevBtn');
            const nextBtn = document.getElementById('nextBtn');
            const steps = document.querySelectorAll('.step');
            const pages = [
                document.getElementById('page1'),
                document.getElementById('page2'),
                document.getElementById('page3'),
                document.getElementById('page4'),
                document.getElementById('page5'),
                document.getElementById('page6')
            ];
            const areaValue = document.getElementById('areaValue');
            const sizeList = document.getElementById('sizeList');
            const addSizeBtn = document.getElementById('addSizeBtn');
            const measureNote = document.getElementById('measureNote');
            const skipSizeNote = document.getElementById('skipSizeNote');
            const requireSizeNote = document.getElementById('requireSizeNote');
            const phoneError = document.getElementById('phoneError');
            
            // 初始化事件监听
            function initEvents() {
                // 下一步按钮
                nextBtn.addEventListener('click', nextPage);
                
                // 上一步按钮
                prevBtn.addEventListener('click', prevPage);
                
                // 样式选择
                document.querySelectorAll('#page2 .option-card').forEach(card => {
                    card.addEventListener('click', function() {
                        document.querySelectorAll('#page2 .option-card').forEach(c => {
                            c.classList.remove('selected');
                        });
                        this.classList.add('selected');
                        userSelections.style = this.getAttribute('data-value');
                    });
                });
                
                // 地址选择
                document.getElementById('district').addEventListener('change', function() {
                    userSelections.district = this.value;
                });
                
                document.getElementById('address').addEventListener('input', function() {
                    userSelections.address = this.value;
                });
                
                document.getElementById('floor').addEventListener('input', function() {
                    userSelections.floor = this.value;
                });
                
                // 量房服务选择
                document.querySelectorAll('input[name="measure"]').forEach(radio => {
                    radio.addEventListener('change', function() {
                        userSelections.measure = this.value;
                        
                        // 显示或隐藏提示信息
                        if (this.value === 'yes') {
                            measureNote.style.display = 'block';
                            skipSizeNote.style.display = 'block';
                            requireSizeNote.style.display = 'none';
                        } else {
                            measureNote.style.display = 'none';
                            skipSizeNote.style.display = 'none';
                            requireSizeNote.style.display = 'block';
                        }
                    });
                });
                
                // 添加尺寸按钮
                addSizeBtn.addEventListener('click', addSize);
                
                // 功能选择（多选）
                document.querySelectorAll('#page5 .feature-card').forEach(card => {
                    card.addEventListener('click', function() {
                        this.classList.toggle('selected');
                        const feature = this.getAttribute('data-value');
                        
                        if (this.classList.contains('selected')) {
                            if (!userSelections.features.includes(feature)) {
                                userSelections.features.push(feature);
                            }
                        } else {
                            userSelections.features = userSelections.features.filter(f => f !== feature);
                        }
                    });
                });
                
                // 联系信息
                document.getElementById('name').addEventListener('input', function() {
                    userSelections.name = this.value;
                });
                
                document.getElementById('phone').addEventListener('input', function() {
                    userSelections.phone = this.value;
                    
                    // 实时验证手机号格式
                    if (this.value.length > 0 && !/^1[3-9]\d{9}$/.test(this.value)) {
                        phoneError.style.display = 'block';
                    } else {
                        phoneError.style.display = 'none';
                    }
                });
                
                document.getElementById('request').addEventListener('input', function() {
                    userSelections.request = this.value;
                });
            }
            
            // 添加尺寸
            function addSize() {
                const width = parseInt(document.getElementById('width').value) || 0;
                const height = parseInt(document.getElementById('height').value) || 0;
                const quantity = parseInt(document.getElementById('quantity').value) || 1;
                
                if (quantity < 1) {
                    alert('件数不能小于1');
                    return;
                }
                
                if (width <= 0 || height <= 0) {
                    alert('宽度和高度必须大于0');
                    return;
                }
                
                const area = (width * height) / 10000;
                const totalArea = area * quantity;
                const sizeId = Date.now(); // 使用时间戳作为唯一ID
                
                userSelections.sizes.push({
                    id: sizeId,
                    width: width,
                    height: height,
                    quantity: quantity,
                    area: area,
                    totalArea: totalArea
                });
                
                updateSizeList();
                updateTotalArea();
                
                // 清空输入框
                document.getElementById('width').value = '';
                document.getElementById('height').value = '';
                document.getElementById('quantity').value = '1';
            }
            
            // 更新尺寸列表
            function updateSizeList() {
                sizeList.innerHTML = '';
                
                if (userSelections.sizes.length === 0) {
                    sizeList.innerHTML = '<div class="size-item">暂无尺寸数据</div>';
                    return;
                }
                
                userSelections.sizes.forEach(size => {
                    const sizeItem = document.createElement('div');
                    sizeItem.className = 'size-item';
                    sizeItem.innerHTML = `
                        <div>${size.width}cm × ${size.height}cm × ${size.quantity}件</div>
                        <div>${size.totalArea.toFixed(2)} ㎡ <span class="delete-size" data-id="${size.id}">删除</span></div>
                    `;
                    sizeList.appendChild(sizeItem);
                });
                
                // 添加删除事件
                document.querySelectorAll('.delete-size').forEach(btn => {
                    btn.addEventListener('click', function() {
                        const id = parseInt(this.getAttribute('data-id'));
                        userSelections.sizes = userSelections.sizes.filter(s => s.id !== id);
                        updateSizeList();
                        updateTotalArea();
                    });
                });
            }
            
            // 更新总面积
            function updateTotalArea() {
                const totalArea = userSelections.sizes.reduce((sum, size) => sum + size.totalArea, 0);
                areaValue.textContent = totalArea.toFixed(2) + ' 平方米';
            }
            
            // 更新UI状态
            function updateUI() {
                // 更新步骤指示器
                steps.forEach((step, index) => {
                    if (index + 1 === currentPage) {
                        step.classList.add('active');
                    } else {
                        step.classList.remove('active');
                    }
                });
                
                // 显示当前页面，隐藏其他
                pages.forEach((page, index) => {
                    if (index + 1 === currentPage) {
                        page.classList.add('active');
                    } else {
                        page.classList.remove('active');
                    }
                });
                
                // 更新按钮文本
                if (currentPage === totalPages) {
                    nextBtn.textContent = '提交询价';
                } else {
                    nextBtn.textContent = '下一步';
                }
                
                // 第一步隐藏上一步按钮
                if (currentPage === 1) {
                    prevBtn.style.visibility = 'hidden';
                } else {
                    prevBtn.style.visibility = 'visible';
                }
            }
            
            // 检查所有必填项
            function checkAllRequiredFields() {
                // 检查样式选择
                if (!userSelections.style) {
                    alert('请选择一种窗户样式');
                    return false;
                }
                
                // 检查区域选择
                if (!userSelections.district) {
                    alert('请选择所在区/镇');
                    return false;
                }
                
                // 检查尺寸信息（如果不需要上门量房）
                if (userSelections.measure === 'no' && userSelections.sizes.length === 0) {
                    alert('请至少添加一个尺寸信息');
                    return false;
                }
                
                // 检查联系信息
                if (!userSelections.name) {
                    alert('请输入您的称呼');
                    return false;
                }
                
                if (!userSelections.phone) {
                    alert('请输入联系电话');
                    return false;
                }
                
                // 验证手机号格式
                if (!/^1[3-9]\d{9}$/.test(userSelections.phone)) {
                    alert('请输入正确的11位手机号码');
                    return false;
                }
                
                return true;
            }
            
            // 下一页
            function nextPage() {
                if (currentPage < totalPages) {
                    // 验证当前页面
                    if (!validatePage(currentPage)) {
                        return;
                    }
                    
                    currentPage++;
                    updateUI();
                } else {
                    // 最后一步提交前检查所有必填项
                    if (!checkAllRequiredFields()) {
                        return;
                    }
                    
                    // 提交询价
                    submitInquiry();
                }
            }
            
            // 上一页
            function prevPage() {
                if (currentPage > 1) {
                    currentPage--;
                    updateUI();
                }
            }
            
            // 验证当前页面
            function validatePage(page) {
                switch(page) {
                    case 2:
                        if (!userSelections.style) {
                            alert('请选择一种窗户样式');
                            return false;
                        }
                        break;
                    case 3:
                        if (!userSelections.district) {
                            alert('请选择所在区/镇');
                            return false;
                        }
                        break;
                    case 4:
                        // 如果不需要上门量房，必须填写尺寸
                        if (userSelections.measure === 'no' && userSelections.sizes.length === 0) {
                            alert('请至少添加一个尺寸信息');
                            return false;
                        }
                        break;
                }
                return true;
            }
            
            // 提交询价
            function submitInquiry() {
                // 获取样式文本
                const styleText = getStyleText(userSelections.style);
                
                // 计算总面积
                const totalArea = userSelections.sizes.reduce((sum, size) => sum + size.totalArea, 0);
                
                // 获取功能文本
                const featuresText = userSelections.features.map(f => getFeatureText(f)).join('、');
                
                // 生成数据文本
                const dataText = generateDataText(styleText, totalArea, featuresText);
                
                // 显示摘要
                const summary = `
                    <div style="margin: 20px 0;">
                        <h3>您的询价摘要</h3>
                        <p><strong>窗户样式:</strong> ${styleText}</p>
                        <p><strong>所在区域:</strong> ${userSelections.district}</p>
                        <p><strong>详细地址:</strong> ${userSelections.address || '未填写'}</p>
                        <p><strong>房屋楼层:</strong> ${userSelections.floor || '未填写'}层</p>
                        <p><strong>上门量房:</strong> ${userSelections.measure === 'yes' ? '需要' : '不需要'}</p>
                        <p><strong>尺寸数量:</strong> ${userSelections.sizes.length}个</p>
                        <p><strong>总面积:</strong> ${totalArea.toFixed(2)} 平方米</p>
                        <p><strong>选择功能:</strong> ${featuresText || '无'}</p>
                        <p><strong>联系人:</strong> ${userSelections.name}</p>
                        <p><strong>联系电话:</strong> ${userSelections.phone}</p>
                        <p><strong>诉求和建议:</strong> ${userSelections.request || '无'}</p>
                    </div>
                    <p>感谢您的选择！我们的专业顾问将根据您的需求为您制定一套优质的门窗解决方案，并在24小时内与您联系。</p>
                    <button id="exportData" style="padding: 10px 20px; background: #3b82f6; color: white; border: none; border-radius: 5px; cursor: pointer; margin-top: 15px;">导出数据</button>
                `;
                
                // 创建模态框显示摘要
                const modal = document.createElement('div');
                modal.style.position = 'fixed';
                modal.style.top = '0';
                modal.style.left = '0';
                modal.style.right = '0';
                modal.style.bottom = '0';
                modal.style.backgroundColor = 'rgba(0,0,0,0.7)';
                modal.style.display = 'flex';
                modal.style.alignItems = 'center';
                modal.style.justifyContent = 'center';
                modal.style.zIndex = '1000';
                
                const modalContent = document.createElement('div');
                modalContent.style.backgroundColor = 'white';
                modalContent.style.padding = '30px';
                modalContent.style.borderRadius = '10px';
                modalContent.style.maxWidth = '80%';
                modalContent.style.maxHeight = '80%';
                modalContent.style.overflow = 'auto';
                modalContent.innerHTML = summary;
                
                const closeButton = document.createElement('button');
                closeButton.textContent = '关闭';
                closeButton.style.padding = '10px 20px';
                closeButton.style.marginTop = '20px';
                closeButton.style.backgroundColor = '#3b82f6';
                closeButton.style.color = 'white';
                closeButton.style.border = 'none';
                closeButton.style.borderRadius = '5px';
                closeButton.style.cursor = 'pointer';
                closeButton.addEventListener('click', function() {
                    document.body.removeChild(modal);
                });
                
                modalContent.appendChild(closeButton);
                modal.appendChild(modalContent);
                document.body.appendChild(modal);
                
                // 添加导出数据功能
                document.getElementById('exportData').addEventListener('click', function() {
                    exportData(dataText);
                });
                
                // 保存数据到本地存储
                saveDataToLocalStorage(dataText);
            }
            
            // 生成数据文本
            function generateDataText(styleText, totalArea, featuresText) {
                let dataText = `佰汇鑫门窗询价单\n`;
                dataText += `生成时间: ${new Date().toLocaleString()}\n\n`;
                
                dataText += `=== 客户信息 ===\n`;
                dataText += `联系人: ${userSelections.name}\n`;
                dataText += `电话: ${userSelections.phone}\n`;
                dataText += `区域: ${userSelections.district}\n`;
                dataText += `地址: ${userSelections.address || '未填写'}\n`;
                dataText += `楼层: ${userSelections.floor || '未填写'}\n`;
                dataText += `量房服务: ${userSelections.measure === 'yes' ? '需要' : '不需要'}\n\n`;
                
                dataText += `=== 产品信息 ===\n`;
                dataText += `窗户样式: ${styleText}\n`;
                dataText += `功能选择: ${featuresText || '无'}\n\n`;
                
                dataText += `=== 尺寸信息 ===\n`;
                if (userSelections.sizes.length === 0) {
                    dataText += `无尺寸信息\n`;
                } else {
                    userSelections.sizes.forEach((size, index) => {
                        dataText += `尺寸${index + 1}: ${size.width}cm × ${size.height}cm × ${size.quantity}件 = ${size.totalArea.toFixed(2)}㎡\n`;
                    });
                }
                dataText += `总面积: ${totalArea.toFixed(2)} 平方米\n\n`;
                
                dataText += `=== 客户诉求 ===\n`;
                dataText += `${userSelections.request || '无特殊诉求'}\n`;
                
                return dataText;
            }
            
            // 导出数据
            function exportData(dataText) {
                const blob = new Blob([dataText], { type: 'text/plain' });
                const url = URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = `佰汇鑫门窗询价单_${new Date().getTime()}.txt`;
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
                URL.revokeObjectURL(url);
            }
            
            // 保存数据到本地存储
            function saveDataToLocalStorage(dataText) {
                // 获取现有数据或初始化空数组
                let inquiries = JSON.parse(localStorage.getItem('windowInquiries')) || [];
                
                // 添加新数据
                inquiries.push({
                    id: Date.now(),
                    data: dataText,
                    timestamp: new Date().toISOString(),
                    contact: userSelections.name,
                    phone: userSelections.phone,
                    district: userSelections.district,
                    style: userSelections.style
                });
                
                // 保存回本地存储
                localStorage.setItem('windowInquiries', JSON.stringify(inquiries));
                
                alert('询价单已提交成功！数据已保存。');
            }
            
            // 获取样式文本
            function getStyleText(style) {
                const styles = {
                    'slide': '六轨推拉窗',
                    'inward': '内开系统窗',
                    'outward': '外开系统窗',
                    'pressure': '侧压气密窗',
                    'heavyDoor': '重型推拉门'
                };
                return styles[style] || '未选择';
            }
            
            // 获取功能文本
            function getFeatureText(feature) {
                const features = {
                    'ventilation': '通风换气',
                    'wideAngle': '广角视镜',
                    'soundproof': '隔音降噪',
                    'insulation': '保温节能',
                    'security': '安全防护',
                    'pricePriority': '价格优先'
                };
                return features[feature] || '未知功能';
            }
            
            // 初始化
            initEvents();
            updateSizeList(); // 初始化尺寸列表
            updateUI();
        });
    </script>
</body>
</html>